{% extends 'layout.html' %}


{% load static %}

{% block title %}
注册
{% endblock %}

{% block css %}

{% endblock %}

{% block content %}
<style>
    .demo-reg-container {
        width: 320px;
        margin: 21px auto 0;
    }

    .demo-reg-other .layui-icon {
        position: relative;
        display: inline-block;
        margin: 0 2px;
        top: 2px;
        font-size: 26px;
    }
</style>

<form class="layui-form">
    <div class="demo-reg-container">
        <blockquote class="layui-elem-quote">
            <i class="iconfont icon-hulianwang"></i>
            登录后可体验全部功能
        </blockquote>
        <div class="layui-form-item">
            <div class="layui-row">
                <div class="layui-col-xs7">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-cellphone"></i>
                        </div>
                        <input type="text" name="mobile" value="" lay-verify="required|phone"
                            placeholder="手机号" lay-reqtext="请填写手机号" autocomplete="off" class="layui-input"
                            id="reg-cellphone">
                    </div>
                </div>
                <div class="layui-col-xs5">
                    <div style="margin-left: 11px;">
                        <button type="button" class="layui-btn layui-btn-fluid layui-btn-primary" id="code_btn"
                            lay-on="reg-get-vercode">获取验证码
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-vercode"></i>
                </div>
                <input type="text" name="code" value="" lay-verify="required" placeholder="验证码" lay-reqtext="请填写验证码"
                    autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-password"></i>
                </div>
                <input type="password" name="password" value="" lay-verify="required" placeholder="密码"
                    autocomplete="off" class="layui-input" id="reg-password" lay-affix="eye">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-password"></i>
                </div>
                <input type="password" name="isPassword" value="" lay-verify="required|confirmPassword"
                    placeholder="确认密码" autocomplete="off" class="layui-input" lay-affix="eye">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-username"></i>
                </div>
                <input type="text" name="name" value="" lay-verify="required|nickname" placeholder="昵称"
                    autocomplete="off" class="layui-input" lay-affix="clear">
            </div>
        </div>
        <div class="layui-form-item">
            <input type="checkbox" name="agreement" lay-verify="required" lay-skin="primary" title="同意">
            <a href="javascript:;" style="position: relative; top: 6px; left: -15px;">
                <ins>用户协议</ins>
                <!-- target="_blank" -->
            </a>
            <a href="/my/login/" style="float: right; margin-top: 7px;">已有账号，前往登录</a>
        </div>
        <div class="layui-form-item">
            <small>{{ form.errors.0 }}</small>
        </div>
        <div class="layui-form-item">
            <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-reg">注册</button>
        </div>
        <div class="layui-form-item demo-reg-other">
            <!-- <label>社交账号注册</label>
                <span style="padding: 0 21px 0 6px;">
                    <a href="javascript:;"><i class="layui-icon layui-icon-login-qq" style="color: #3492ed;"></i></a>
                    <a href="javascript:;"><i class="layui-icon layui-icon-login-wechat" style="color: #4daf29;"></i></a>
                    <a href="javascript:;"><i class="layui-icon layui-icon-login-weibo" style="color: #cf1900;"></i></a>
                </span> -->
        </div>
    </div>
</form>

<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<!-- <script src="//unpkg.com/layui@2.9.6/dist/layui.js"></script> -->


{% endblock %}

{% block js %}
<script>

    function startCountdown() {


        // 获取发送验证码按钮元素
        let btn = document.querySelector("#code_btn");

        // 发送验证码后的初始时间
        let initial_time = 60;

        // 保存点击按钮前的按钮文本
        let btn_test = btn.innerHTML;

        // 禁用按钮
        btn.disabled = true;


        // 创建一个定时器对象
        let timer = setInterval(() => {

            // 判断当 initial_time 时间到达零后则清除延时器
            if (initial_time <= 0) {

                // 将按钮恢复到原文本
                btn.innerHTML = btn_test;
                // 恢复按钮的点击
                // 取消禁用按钮
                btn.disabled = false;
                // 清除延时器
                clearInterval(timer);

            } else {
                // 每隔一秒减一
                initial_time--;

                // 把按钮的文本进行修改
                btn.innerHTML = `(${initial_time})秒重新发送`;
            }


        }, 1000);


    };


    layui.use(function () {
        var $ = layui.$;
        var form = layui.form;
        var layer = layui.layer;
        var util = layui.util;

        // 自定义验证规则
        form.verify({
            // 确认密码
            confirmPassword: function (value, item) {
                const regexPattern = /^[0-9a-zA-Z.]+$/; // 正则规则

                if (!regexPattern.test(item.value)) {
                    return '只能输入数字、大小写字母和英文句点符号';
                }

                // 检查密码长度
                if (item.value.length < 6 || item.value.length > 17) {
                    return '密码长度必须在6到17位之间';
                }

                // 确认密码是否与注册密码一致
                var passwordValue = $('#reg-password').val();
                if (item.value !== passwordValue) {
                    return '两次密码输入不一致';
                }
            },
            nickname: function (value, item) {

                const regexPattern = /^[a-zA-Z0-9\u4e00-\u9fa5]+$/; // 正则规则

                if (!regexPattern.test(item.value)) {
                    return '只能包含英文、中文和数字，不能包含标点符号';
                }

                if (item.value.length < 3 || item.value.length > 17) {
                    return '用户名长度必须在3到17位之间';
                }
            }

        });

        // 提交事件
        form.on('submit(demo-reg)', function (data) {
            var field = data.field; // 获取表单字段值

            // 是否勾选同意
            if (!field.agreement) {
                layer.msg('您必须勾选同意用户协议才能注册');
                return false;
            }

            // 显示填写结果，仅作演示用
            // layer.alert(JSON.stringify(field), {
            //   title: '当前填写的字段值'
            // });
            console.log(field);
            // qwe12345
            // 此处可执行 Ajax 等操作
            // …

            axios({
                url: "/my/register/",
                method: "post",
                headers: {
                    "X-CSRFToken": "{{csrf_token}}",
                    "Content-Type": "application/x-www-form-urlencoded"
                },
                data: field
            }).then(res => {
                console.log("服务器注册结果：", res);
                layer.msg("注册成功，正在跳转")
                setTimeout(()=>{
                    window.location.href = res.data.redirect
                },1000)
            }).catch(error => {
                console.log(`服务器注册失败，失败原因：${error.response.data}`);
                layer.msg(error.response.data)
            })


            return false; // 阻止默认 form 跳转
        });

        // 普通事件
        util.on('lay-on', {
            // 获取验证码
            'reg-get-vercode': function (othis) {
                var isvalid = form.validate('#reg-cellphone'); // 主动触发验证，v2.7.0 新增
                let phone = document.querySelector('[name=mobile]').value;
                // 验证通过
                if (isvalid) {
                    startCountdown();   // 让按钮等待60秒
                    layer.msg('已发送验证码');
                    axios({
                        url: "/save/code/",
                        method: "GET",
                        params:{
                            "mobile":phone
                        }
                    }).then(res => {
                        console.log(res);
                        layer.alert(res.data, (index) => {
                            layer.close(index);

                        }, () => {
                            layer.close(index);
                        });
                    }).catch(error => {
                        console.log(error);
                        layer.msg(error.response.data)
                    })

                    // 此处可继续书写「发送验证码」等后续逻辑
                    // …
                }
            }
        });
    });


</script>
{% endblock %}